<%@page import="com.zretc.news.entity.Users"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>用户管理</title>

<!-- 引入layui.css文件 -->
<link rel="stylesheet" href="layui/css/layui.css"  media="all">

<!--1. Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">



<!--2. Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">
</head>
<body>
	<jsp:include page="nav.html"></jsp:include>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="NewsTypeServlet">新闻类型</a></li>
					<li><a href="addtype.jsp">新增类型</a></li>
					<li><a href="UsersServlet">用户表</a></li>
					<li><a href="addusers.jsp">新增用户</a></li>
					<li><a href="NewsTypeServlet?op=queryByPage">新闻类型表(分页)</a></li>
					<li class="active"><a href="UsersServlet?op=queryByPage">用户表(分页) <span
							class="sr-only">(current)</span></a></li>
				</ul>

			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<h2 class="sub-header">
					用户列表[分页]

					<form class="navbar-form navbar-right" action="UsersServlet"
						method="post">
						<input type="text" class="form-control" name="keywords" id="keywords" value="${keywords}"
							placeholder="关键字"> 
							<input type="hidden"  name="op" value="queryByPage">	
							<input type="submit"
							class="btn btn-primary" value="查询">
					</form>

				</h2>
				<div>目前在线人数为${applicationScope.count}人</div>
				<div class="table-responsive">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>用户编号</th>
								<th>用户名称</th>
								<th>登录状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						<!-- 如果属性范围内的pd为null，我们就跳转到UsersServlet去获取数据，然后再转发回来 -->
							<c:if test="${pd == null }">
							<!-- c:redirect，跳转到UsersServlet -->
							<c:redirect url="UsersServlet?op=queryByPage"></c:redirect>
							</c:if>
							<!-- 如果属性范围内的list不为null，遍历数据并展示结果 -->
							<c:if test="${pd != null }">
								<c:forEach items="${pd.data}" var="users">
									<tr>
										<td>${users.userid}</td>
										<td>${users.username}</td>
										<td>${users.userStatus==1?"启用":"禁用"}</td>
										<td><a href="#">修改</a> | <a href="#">启用/禁用</a> | <a href="#">重置密码</a></td>
									</tr>
								</c:forEach>
							</c:if>
						</tbody>
					</table>
				</div>
				
				<!-- 显示 分页导航区域 -->
				<div id="pagediv">123</div>
			</div>
		</div>
	</div>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!--3 - js/jquery-2.0.3.js -->
	<script src="js/jquery-2.0.3.js"></script>
	<!--4 - ootstrap.min.js -->
	<script src="dist/js/bootstrap.min.js"></script>
	<!-- 引入layui.js文件 -->	
	<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  
//完整功能
  laypage.render({
    elem: 'pagediv'
    ,count: ${pd.totalCount}
    ,curr: ${pd.page}
    ,limit: ${pd.pageSize}
    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    ,jump: function(obj, first){
	    //obj包含了当前分页的所有参数，比如：
	    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
	    console.log(obj.limit); //得到每页显示的条数
	    
	    //首次不执行
	    if(!first){
	      //do something
	       location.href="UsersServlet?op=queryByPage&page="+obj.curr+"&pageSize="+obj.limit+"&keywords="+$("#keywords").val();
	    }
	  }
  });

  
});
  
</script>  
</body>
</html>